<template>
  <div class="right" v-if="store.rightPanelVisible">
    <div class="pass-form">
      <div class="pass-form-header">
        <span>{{ store.rightPanelTitle }}</span>
        <el-button
          text
          type="danger"
          @click="removeItem"
          class="w-8"          
          >
          <svg-icon icon-class="DeleteFilled" />
        </el-button>
      </div>
      <hr
        style="
          margin: 0px;
          flex-shrink: 0;
          border-width: 0px 0px thin;
          border-style: solid;
          border-color: rgba(0, 0, 0, 0.12);
        "
      />
      <div class="pass-form-body">
        <div class="p-8 flex flex-col">

          <el-form label-position="top" size="large" v-if="store.rightPanelType === 'Application'">
            <el-form-item :label="t('appstore.application.appId')" >
              <el-input v-model="passTemplate.associatedStoreIdentifier"></el-input>
            </el-form-item>
          </el-form>

          <el-form label-position="top" size="large" v-else-if="store.rightPanelType === 'Logo'">
            <el-form-item :label="t('flypass.logo-text')" >
              <el-input v-model="passTemplate.logoText"></el-input>
            </el-form-item>
          </el-form>

          <el-form label-position="top" size="large" v-else-if="store.rightPanelType === 'Item' && currentItem">

            <el-form-item :label="t('flyparam.entry_label')">
              <el-input v-model="currentItem.label" readonly></el-input>
            </el-form-item>

            <el-form-item :label="t('flypass.apple-lock-screen-message')">
              <el-input type="textarea" v-model="currentItem.changeMessage"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { usePassStore } from '@/store/modules/pass'
import { storeToRefs } from 'pinia'

const store = usePassStore()
const {items, getCurrentItem, passTemplate} = storeToRefs(usePassStore())
const { addFieldsItem, setItems } = usePassStore()
const { t } = useI18n()

const currentItem = computed(() => {
  return getCurrentItem.value
})

function removeItem() {
  const localItems = [...items.value]
  if(currentItem) {    
    const removeIndex = localItems.findIndex(item => item.id === currentItem.value?.id)
    const removedItem = localItems.splice(removeIndex, 1)[0]
    const newItems = localItems.filter(item => item.id !== currentItem.value?.id)
    addFieldsItem(removedItem)
    setItems(newItems)
    store.setRightPanelVisible(false)
  }
}

</script>

<style lang="scss" scoped>
.right {
  flex-basis: 25%;
  max-width: 25%;
  flex-grow: 0;

  .pass-form {
    width: 100%;
    overflow-y: auto;
    background-color: rgb(255, 255, 255);
    color: rgb(51, 51, 51);
    box-shadow:
      rgba(0, 0, 0, 0.2) 0px 2px 4px -1px,
      rgba(0, 0, 0, 0.14) 0px 4px 5px 0px,
      rgba(0, 0, 0, 0.12) 0px 1px 10px 0px;
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 4px;
    .pass-form-header {
      display: flex;
      height: 50px;
      -webkit-box-align: center;
      align-items: center;
      padding: 8px 16px;
      justify-content: space-between
    }

    .pass-form-body {
      display: flex;
      flex-direction: column;

    }
  }
}
</style>
